<template>
  <div :class="['sidebar', { collapsed: isCollapse }]">
    <!-- Logo部分 -->
    <div class="logo">
      <el-icon v-if="isCollapse" size="24" style="color: #409eff;">
        <Monitor />
      </el-icon>
      <span v-else class="logo-text">Admin2025</span>
    </div>

    <!-- 动态菜单 -->
    <el-menu
      :default-active="activeMenu"
      :collapse="isCollapse"
      :unique-opened="false"
      class="sidebar-menu"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#409eff"
      @select="handleMenuSelect"  
    >
      <!-- 固定菜单项（如Dashboard） -->
      <el-menu-item index="/dashboard">
        <el-icon><Monitor /></el-icon>
        <span>工作台</span>
      </el-menu-item>

      <!-- 动态渲染菜单树 -->
      <template v-for="menu in enabledMenuTree" :key="menu.path">
        <template v-if="menu.children && menu.children.length > 0">
          <el-sub-menu 
            :index="menu.path"
            :disabled="!menu.isActive"
          >
            <template #title>
              <el-icon>
                <component :is="menu.icon" />
              </el-icon>
              <span :class="{ 'disabled-menu': !menu.isActive }">
                {{ menu.name }}
              </span>
            </template>
            <template v-for="child in menu.children" :key="child.path">
              <el-menu-item 
                :index="child.path"
                :disabled="!child.isActive"
              >
                <el-icon>
                  <component :is="child.icon" />
                </el-icon>
                <span :class="{ 'disabled-menu': !child.isActive }">
                  {{ child.name }}
                </span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else>
          <el-menu-item 
            :index="menu.path"
            :disabled="!menu.isActive"
          >
            <el-icon>
              <component :is="menu.icon" />
            </el-icon>
            <span :class="{ 'disabled-menu': !menu.isActive }">
              {{ menu.name }}
            </span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, computed,watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'  // 添加 useRouter
import { useMenuStore } from '@/stores/menu'
import { Monitor } from '@element-plus/icons-vue'

// Props
const props = defineProps({
  isCollapse: Boolean
})

// 路由和状态
const route = useRoute()
const router = useRouter()  // 获取路由实例
const menuStore = useMenuStore()

// 使用计算属性获取菜单树，自动响应变化
const enabledMenuTree = computed(() => {
  const filterDisabled = (menus) => {
    return menus
      // .filter(menu => menu.isActive !== false) // 过滤掉禁用的菜单
      .map(menu => {
        if (menu.children) {
          return {
            ...menu,
            children: filterDisabled(menu.children)
          }
        }
        return menu
      })
  }
  return filterDisabled(menuStore.menuTree)
})
// 计算当前激活菜单
const activeMenu = computed(() => route.path)

// 菜单选择事件处理
const handleMenuSelect = (index) => {
  router.push(index)  // 导航到选择的路径
}

// 初始化加载菜单
onMounted(async () => {
  if (menuStore.menuTree.length === 0) {
    await menuStore.fetchMenuTree()
  }
})

// 监听路由变化，确保菜单激活状态正确
watch(
  () => route.path,
  (newPath) => {
    // 可以在这里添加额外的路由处理逻辑
  }
)
</script>

<style scoped>
.sidebar {
  background-color: #304156;
  transition: width 0.28s;
  overflow: hidden;
  height: 100vh;
  flex-shrink: 0;
  width: 250px;
}

.sidebar.collapsed {
  width: 64px;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #434a5a;
  color: #409eff;
  flex-shrink: 0;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #409eff;
}

.sidebar-menu {
  border-right: none;
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 100%;
}

.sidebar-menu.el-menu--collapse {
  width: 100%;
}

/* 禁用菜单项的样式 */
.disabled-menu {
  color: #8a8a8a !important;
  cursor: not-allowed !important;
}

/* 调整禁用菜单项的图标颜色 */
:deep(.el-menu-item.is-disabled .el-icon),
:deep(.el-sub-menu.is-disabled .el-icon) {
  color: #8a8a8a !important;
}

/* 禁用菜单项悬停效果 */
:deep(.el-menu-item.is-disabled:hover),
:deep(.el-sub-menu.is-disabled:hover) {
  background-color: transparent !important;
}
</style>